<template>
    <div>
        <div style="margin-bottom: 5px">
            <el-input v-model="inputName" placeholder="please input name" style="width: 200px" suffix-icon="el-icon-search"
                      @keyup.enter.native="loadPost">
            </el-input>
            <el-select v-model="selectGoodstype" placeholder="请选择种类" style="margin-left: 7px">
                <el-option
                        v-for="item in goodstypeData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="selectStorage" pladceholder="请选择仓库" style="margin-left: 7px">
                <el-option
                        v-for="item in storageData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>

            <el-button type="success" style="margin-left: 7px" @click="loadPost">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
        </div>

        <el-table :data="tableData" :stripe="stripeTrue" :border="borderTrue"
                  :header-cell-style="{background:'rgba(209,209,245,0.28)'}">

            <!--prop的属性和 xml文件中数据库字段的名字相对应-->
            <el-table-column prop="id" label="ID" width="">
            </el-table-column>
            <el-table-column prop="goodsName" label="品名" width="">
            </el-table-column>
            <el-table-column prop="goodsTypeName" label="分类" width="">
            </el-table-column>
            <el-table-column prop=storageName label="仓库" width="">
            </el-table-column>
            <el-table-column prop="userName" label="申请人" width="">
            </el-table-column>
            <el-table-column prop="adminName" label="操作人" width="">
            </el-table-column>
            <el-table-column prop="count" label="数量" width="">
            </el-table-column>
            <el-table-column prop="createTime" label="操作时间" width="">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="">
            </el-table-column>

        </el-table>

        <el-pagination style="margin-top: 5px; text-align: center"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageNum"
                       :page-sizes="[7, 10, 15,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        name: "RecordManage",
        data() {

            return {

                user: JSON.parse(sessionStorage.getItem("CurUser")),

                tableData: [],
                storageData: [],
                goodstypeData: [],
                stripeTrue:true,
                borderTrue:true,
                pageSize: 10,
                pageNum: 1,
                total:0,
                inputName:'',
                selectGoodstype: '',
                selectStorage: '',

                addOrUpdate:String,

                centerDialogVisible:false,

                form:{
                    name: '',
                    storage: '',
                    goodstype: '',
                    count:'',
                    remark:'',
                },

            }
        },
        methods:{

            goods_storage(row){
                let temp = this.storageData.find(item=>{
                    return item.id == row.storage
                })
                return temp && temp.name
            },

            goods_goodstype(row){
                let temp = this.goodstypeData.find(item=>{
                    return item.id == row.goodstype
                })
                return temp && temp.name
            },

            loadStorage(){
                this.$axios.get(this.$httpUrl + '/storage/list').then(res=>res.data).then(res=>{

                    if (res.code==200){
                        this.storageData = res.data
                        this.total = res.total
                    }else{
                        this.$message.error("获数据失败！")
                    }

                })
            },
            loadGoodstype(){
                this.$axios.get(this.$httpUrl + '/goodstype/list').then(res=>res.data).then(res=>{

                    if (res.code==200){
                        this.goodstypeData = res.data
                        this.total = res.total
                    }else{
                        this.$message.error("获数据失败！")
                    }

                })
            },

            resetForm() {
                this.$refs.form.resetFields();
            },

            reset(){
                this.inputName='';
                this.selectStorage='';
                this.selectGoodstype='';

                this.loadPost()
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum = 1;
                this.pageSize = val;
                this.loadPost();

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val;
                this.loadPost();
            },

            loadPost(){
                this.$axios.post(this.$httpUrl + '/record/diyListPage',{
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,

                    param:{
                        name: this.inputName + '',
                        storage: this.selectStorage + '',
                        goodstype: this.selectGoodstype + '',
                        roleId: this.user.roleId + '',
                        userId: this.user.id + ''
                    }

                }).then(res=>res.data).then(res=>{
                    console.log(res);

                    if (res.code==200){
                        this.tableData = res.data
                        this.total = res.total
                    }else{
                        this.$message.error("获数据失败！")
                    }

                })
            }
        },

        beforeMount() {

            this.loadStorage();
            this.loadGoodstype();
            this.loadPost();
        }
    }
</script>

<style scoped>
    .el-table-column{
        text-align: center;
        margin: auto;
    }
</style>